import {
  message,
  Switch,
  Row,
  Col
} from 'antd';
import { useRequest } from 'ahooks';
import * as APIS from '../../../../constants/api-constants';
import style from './question-hide.module.css';

interface QuestionnaireProps {
  currentQuestionnaire: Questionnaire.QuestionnaireItem | undefined,
  handleAlter: () => void
}

export default ({
  currentQuestionnaire,
  handleAlter
}: QuestionnaireProps) => {
  const rowClassName = style['question-hide-row'];
  /**
   * 设置四个选项卡的显示或者隐藏
   */
  const { run, loading } = useRequest((data) => {
    const value = data.value ? 1 : 0;
    const { basicInformationName } = data;
    return {
      url: APIS.QUESTIONNAIRE_VISIBLE,
      method: 'PUT',
      data: {
        uuid: currentQuestionnaire?.uuid,
        basicInformationName,
        value
      }
    };
  }, {
    manual: true,
    onSuccess: (res) => {
      const { optionSetting } = res.data;
      handleAlter();
      if (!optionSetting) {
        message.warn('对应基本信息选项内容为空，无法开启！');
      } else {
        message.success('设置成功');
      }
    },
    onError: () => {
      console.log('设置失败');
    }
  });

  if (currentQuestionnaire === undefined) return null;
  return (
    <>
      <Row className={rowClassName}>
        <Col span={2}>
          姓名：
        </Col>
        <Col span={2}>
          <Switch
            loading={loading}
            checked={
              Boolean(currentQuestionnaire?.userNameVisible)
            }
            onChange={(value) => {
              run({
                value,
                basicInformationName: 'userNameVisible'
              });
            }}
          />
        </Col>
      </Row>
      <Row className={rowClassName}>
        <Col span={2}>
          工号：
        </Col>
        <Col span={2}>
          <Switch
            loading={loading}
            checked={
              Boolean(currentQuestionnaire?.userNumVisible)
            }
            onChange={(value) => {
              run({
                value,
                basicInformationName: 'userNumVisible'
              });
            }}
          />
        </Col>
      </Row>
      <Row className={rowClassName}>
        <Col span={2}>
          工作单位：
        </Col>
        <Col span={2}>
          <Switch
            loading={loading}
            checked={Boolean(
              currentQuestionnaire
              && currentQuestionnaire.workUnitVisible
            )}
            onChange={(value) => {
              run({ value, basicInformationName: 'workUnitVisible' });
            }}
          />
        </Col>
      </Row>
      <Row className={rowClassName}>
        <Col span={2}>
          附属单位：
        </Col>
        <Col span={2}>
          <Switch
            loading={loading}
            checked={Boolean(
              currentQuestionnaire
              && currentQuestionnaire.affiliatedVisible
            )}
            onChange={(value) => {
              run({ value, basicInformationName: 'affiliatedVisible' });
            }}
          />
        </Col>
      </Row>
      <Row className={rowClassName}>
        <Col span={2}>
          工作职位：
        </Col>
        <Col span={2}>
          <Switch
            loading={loading}
            checked={Boolean(
              currentQuestionnaire
              && currentQuestionnaire.jobPositionVisible
            )}
            onChange={(value) => {
              run({ value, basicInformationName: 'jobPositionVisible' });
            }}
          />
        </Col>
      </Row>
      <Row className={rowClassName}>
        <Col span={2}>
          工作岗位：
        </Col>
        <Col span={2}>
          <Switch
            loading={loading}
            checked={Boolean(
              currentQuestionnaire
              && currentQuestionnaire.operatingPostVisible
            )}
            onChange={(value) => {
              run({
                value,
                basicInformationName: 'operatingPostVisible'
              });
            }}
          />
        </Col>
      </Row>
    </>
  );
};
